<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div id="insert">
    <form action="http:\\localhost:8080/user" method="post">
        年龄<input type="text" name="age"><br>
        用户名<input type="text" name="name"><br>
        密码 <input type="password" name="password"><br>
        <input type="submit" value="提交">
    </form>
</div>
    <hr>
    <div id="delete">
    <form action="http:\\localhost:8080/user" method="post">
        请输入要删除的id<input type="text" name="id"><br>
        <input type="submit" value="提交">
    </form>
</div>
    <hr>
    <div id="selectById">
        <form action="http:\\localhost:8080/user" method="get">
            请输入要查询的id<input type="text" name="id"><br>
            <input type="submit" value="提交">
        </form>
    </div>
    <hr>
    <div id="select">
        <table border="1" cellspacing="0"  cellpadding="10" align="center">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>密码</th>
            </tr>
            <tr v-for="(user,index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.password}}</td>
            </tr>
        </table>
</div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                "name": "zs",
                "age": 23,
                "password": "123456"
            },{
                "name": "ls",
                "age": 25,
                "password": "123456"
            }]
        },
        mounted () {
            axios.get("http://localhost:8080/user").then(res=> {
                this.users= res.data.data;
            })
        }
    });
</script>
</body>
</html>